// 1.封装饼形图 - 避免变量污染，方便后期ajax渲染
function setPie(arr) {
  let myChart = echarts.init(document.querySelector('.pie'))
  let option = {
    // 标题组件
    title: {
      text: '籍贯 Homentown',
      textStyle: {
        color: '#6d767e'
      }
    },
    /* 提示框组件 */
    tooltip: {
      // 饼图：{a}（系列名称）{b}（数据项名称）{c}（数值）{d}（百分比）
      formatter: '{a}<br>{b} <b>{c}</b>人 占比{d}%'
    },
    series: [
      {
        name: '各地人员分布',
        type: 'pie',
        radius: ['10%', '55%'], // 内外圆的半径
        center: ['50%', '50%'], // 饼图圆心位置
        roseType: 'area', // area面积模式，radius半径模式
        itemStyle: {
          borderRadius: 7, // 元素样式，边框圆角
        },
        data: arr
      }
    ]
  }

  myChart.setOption(option)
}
// 调用函数执行
// setPie()

// 2.封装折线图 - 避免变量污染，方便后期ajax渲染
function setLine(obj) {
  let myChart = echarts.init(document.querySelector('.line'))
  let option = {
    // 提示框
    tooltip: {
      trigger: 'axis',
      position: function (pt) { // pt 鼠标坐标的数组
        return [pt[0], '10%'];
      }
    },
    //图例组件
    legend: {top: 20},
    // 标题组件
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      // x轴内容是否写到刻度之间
      boundaryGap: false,
      // 设置x轴坐标值
      data: obj.name
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%']
    },
    // 数据缩放组件
    dataZoom: [
      {
        type: 'slider', // slider滑块组件, inside默认鼠标滚轮+滑动
        start: 0,
        end: 100 // 拖动滑块结束位置
      }
    ],
    color: ['#ee6666', '#5470c6'],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none', // circle圆形，none无符号
        sampling: 'lttb',
        smooth: true, // 是否平滑曲线
        // 设置折线图数据
        data: obj.salary
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        // 设置折线图数据
        data: obj.truesalary,
        smooth: true // 转折平滑
      }
    ]
  }

  myChart.setOption(option)
}
// 调用
// setLine()

// 3.封装柱形图 - 避免变量污染，方便后期ajax渲染
function setBar(obj) {
  let myChart = echarts.init(document.querySelector('.barChart'))
  let option = {
    /* 提示框 */
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器配置项
        type: 'cross', //十字准星指示器
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例组件
    legend: {},
    //网格
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    xAxis: [
      {
        type: 'category',
        data: obj.group,
        axisPointer: {
          type: 'shadow' // 鼠标进入带有阴影
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10, // 间隔
        axisLabel: {
          formatter: '{value}分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    // 数据部分
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: '15', // 柱子宽度
        data: obj.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: '15', // 柱子宽度
        data: obj.lt60
      },
      {
        name: '60-80分人数',
        type: 'bar',
        barWidth: '15', // 柱子宽度
        yAxisIndex: 1,
        data: obj.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: '15', // 柱子宽度
        yAxisIndex: 1,
        data: obj.gt80
      }
    ]
  }
  myChart.setOption(option)
}
// 调用
// setBar()

// 4. 封装地图 -  避免变量污染，方便后期ajax渲染
function setMap(mapData1,mapData2) {
  let myChart = echarts.init(document.querySelector('.map'))
  // 位置 + 经纬度
  let chinaGeoCoordMap = mapData1
  let chinaDatas = mapData2
  let convertData = function (data) {
    let res = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = chinaGeoCoordMap[dataItem[0].name];
      let toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  }
  let series = [];
  [['顺义校区', chinaDatas]].forEach(function (item) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 12
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 4 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  })
  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
}
// 调用
// setMap()

// 需求1：页面一加载的时候，渲染班级概况
axios({
  method: 'get',
  url: '/student/overview'
}).then(({data: res}) => {
  // console.log(res)
  // 渲染
  if(res.code === 0) {
    document.querySelector('.total').innerHTML = res.data.total
    document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
    document.querySelector('.avgAge').innerHTML = res.data.avgAge
    document.querySelector('.proportion').innerHTML = res.data.proportion
  }
})

// 需求2：柱形图，使用 按次查询成绩
// 切换显示隐藏（通过类名.style.display）
let btn = document.querySelector('.bar .btn')
let batch = document.querySelector('#batch')
btn.addEventListener('click', function() {
  // console.log(ul.style.display)
  if(batch.style.display === 'none') {
    batch.style.display = 'block'
  }else{
    batch.style.display = 'none'
  }
})
// 点击li标签查询成绩
let lis = document.querySelectorAll('#batch li')
lis.forEach((item,index) => {
  item.onclick = function() {
    // 发送ajax
    axios({
      method: 'get',
      url: '/score/batch',
      params: { batch: index+1 },
    }).then( ({data: res}) => {
      // console.log(res)
      if(res.code === 0) {
        // 把数据渲染到 setBar() 里面去
        setBar(res.data)
      }
    })
  }
})
// 触发第一个li标签的点击事件
lis[0].click()

// 需求3：发送ajax，获取所有学员信息，渲染折线/饼形/地图
axios({
  method: 'get',
  url: '/student/list',
}).then( ({data: res}) => {
  // console.log(res)
  if(res.code === 0) {
    // 3.1折线图 - 需要三个数组：名字，期望薪资，实际薪资
    let lineData = {
      name: [],
      salary: [],
      truesalary: []
    }
    // 3.2饼形图 - 只需要一个数组即可，里面放的是对象
    let pieData = []

    // 3.3地图 - 需要一个对象（地区经纬度），一个数组（二维数组）
    let mapData1 = {"顺义校区": [116.4551, 40.2539]}
    // 二维数组，地区和对应人数
    let mapData2 = []

    // 遍历res.data，将满足条件的元素，添加到对应数组中
    res.data.forEach(item => {
      // 把学生姓名/期望薪资/实际薪资添加到对象数组中
      lineData.name.push(item.name)
      lineData.salary.push(item.salary)
      lineData.truesalary.push(item.truesalary)
      // 判断学生所在省份，在数组中是否存在：findIndex()
      // pieData数组中每一个元素的name属性，如果有一个和当前学员所在省份相同，就
      let index = pieData.findIndex(ele => ele.name === item.province)
      // 判断数组中是否包含对应的省份
      if (index === -1) {
        // 数组中没有对应省份，就添加一个 对象
        pieData.push({value: 1, name: item.province})
      } else {
        // 数组中有对应的省份，就让它value++
        pieData[index].value++
      }
      // 向mapData1这个对象中，放入地区对应的经纬度
      mapData1[item.county] = [item.jing, item.wei]
      let i = mapData2.findIndex(ele => ele[0].name === item.county)
      if(i === -1) {
        // 数组中没有对应的元素，就添加一个新的
        mapData2.push([{name:item.county, value:1}])
      }else{
        // 数组中有对象的元素，让value++
        mapData2[i][0].value++
      }
    })
    /* 调用数据可视化对应方法 */
    // 渲染折线图
    // console.log(lineData)
    setLine(lineData)
    // 渲染饼图
    // console.log(pieData)
    setPie(pieData)
    // 渲染地图
    // console.log(mapData1, mapData2)
    setMap(mapData1, mapData2)
  }
})